<template>
	<view class="">
		<img class="bg-img" src="https://dnsverify.pfmoto.com/appstatic/img/my/bg-img.jpg" alt="">
		<!-- <z-paging ref="paging" v-model="list" @query="queryList"> -->
			<view class="card-list" v-for="(item,index) in list">
				<view class="card-head">
					<view class="head-left">
						<view class="head-left-l">
							<image class="avatar" src="" mode=""></image>
							<image class="avatar-bottom" src="https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_bottom.png" mode=""></image>
						</view>
						<view class="head-left-r">
							<view class="" style="display: flex;flex-direction: row;">
								<view v-if="item.nickName==null || item.nickName=='' || item.phone==undefined" class="">
									<view v-if="item.phone=='' || item.phone==null || item.phone==undefined" class="name">注销账号</view>
									<view v-else class="name">{{item.phone.substr(0, 3) + '*****' + item.phone.substr(8)}}</view>
								</view>
								<view v-else class="name">{{item.nickName}}</view>
								<image style="width: 22px;height:16px;" src="" mode=""></image>
							</view>
							<view class="" style="display: flex;padding-top: 7px;">
								<u-icon name="checkmark" color="#EA5404" size="12"></u-icon>
								<view class="check">认证用户</view>
							</view>
						</view>
					</view>
					<view v-if="item.authorId!= loginId">
						<text 
							:class="item.isFocus?'gz active':'gz'"
							@click.stop="focusCommunity(item)">{{!item.isFocus?"关注":"已关注"}}
						</text>
					</view>
				</view>
				<view class="card-middle">
					<view style="padding-top: 20px;padding-bottom: 20px;" class="title">{{item.title}}</view>
					<image @click="gotoVote(item)" class="" style="width: 100%;background-color: black;" src="" mode="aspectFit"></image>
				</view>
				<view class="card-bottom">
					<view class="bottom-endtime">{{item.endTime}}结束</view>
					<view class="bottom-numbers">{{item.numbers}}人已参加</view>
				</view>
			</view>
		<!-- </z-paging> -->
	</view>
</template>

<script>
	const app = getApp();
	const util = require("@utils/util.js");
	const network = require("@manager/network-manager.js");
	export default{
		components: {},
		data(){
			return {
				list:[
					{
						avatar:'',
						nickName:'小东西',
						phone:'15800000000',
						leval:'1',
						authentication:'1',
						img:'',
						title:'投票投票投票',
						endTime:'2022/07/04',
						numbers:'244',
						isFocus:true,
						authorId:'1',
						id:'1'
					},
					{
						avatar:'',
						nickName:'大东西',
						phone:'15800001111',
						leval:'1',
						authentication:'1',
						img:'',
						title:'投票投票投票',
						endTime:'2022/07/04',
						numbers:'244',
						isFocus:false,
						authorId:'1',
						id:'2'
					},
					{
						avatar:'',
						nickName:'',
						phone:'15800002222',
						leval:'1',
						authentication:'1',
						img:'',
						title:'投票投票投票',
						endTime:'2022/07/04',
						numbers:'244',
						isFocus:false,
						authorId:'1',
						id:'3'
					},
				],
				loginId:'2',
			}
		},
		onShow:function(){
			this.queryList()
		},
		methods:{
			queryList: function(pageNo, pageSize) {//pageNo和pageSize会自动计算好，直接传给服务器即可
				var that = this;
				var uri = app.globalData.config.interfaces.xxxx;
				var params = {
					"pageNum": pageNo,
					"pageSize": pageSize,
				};
				network.get(uri, params, 'form').then(res => {
					if(res.code==200){
						this.$refs.paging.complete(res.data.list);
					}else{
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			/**
			 * 关注和取消关注
			 */
			focusCommunity(item){
				var that=this
				if(item.isFocus){//关注了
					var uri=app.globalData.config.interfaces.URI_COMMUNITY_FOCUS_CANCEL;
					var params = {
						"fanId": app.getUserId(),
						"authorId": item.authorId,
					};
					network.post(uri, params, 'json').then(res => {
						if(res.code==200){
							that.list.map(v => {
								if (v.authorId == item.authorId) {
									v.isFocus=false;
								}
							})
						}else{
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}
					})
				}else{//没关注
					var uri = app.globalData.config.interfaces.URI_COMMUNITY_FOCUS;
					var params = {
						"fanId": app.getUserId(),
						"authorId": item.authorId,
					};
					network.post(uri, params, 'json').then(res => {
						if(res.code==200){
							that.list.map(v => {
								if (v.authorId == item.authorId) {
									v.isFocus=true;
								}
							})
						}else{
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}
					})
				}	
			},
			/**
			 * 跳转到投票详情 
			 */
			gotoVote(item){
				uni.navigateTo({
					url: '/module_community/cocreate/vote?id=' + item.id,
				});
			}
		}
	}
</script>

<style>
	.bg-img {
		position: fixed;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.card-list {
		padding: 22px 16px 0px 16px;
	}
	.card-head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.head-left {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.head-left-l {
		
	}
	.check {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 10px;
		line-height: 14px;
		display: flex;
		align-items: center;
		color: #ADB0AE;
	}
	.head-left-r {
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		
	}
	.name {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
		line-height: 20px;
		display: flex;
		align-items: center;
		color: #3D3A3A;

	}
	.avatar {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background-color: black;
	}
	.avatar-bottom {
		width: 14px;
		height:14px;
		left: -14px;
	}
	.gz {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 52rpx;
		display: inline-block;
		width: 112rpx;
		height: 50rpx;
	
		text-align: center;
		border: 2rpx solid #EA5404;
		border-radius: 4rpx;
		color: #EA5404;
	
	}
	
	.active {
		border: 2rpx solid #ADB0AE;
	
		color: #ADB0AE;
	}
	.card-middle {
		display: flex;
		flex-direction: column;
		
	}
	.title {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
		display: flex;
		align-items: center;
		color: #000000;
	}
	.card-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 20px 0px 20px 0px;
	}
	.bottom-endtime {
		font-family: 'Arial';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 16px;
		display: flex;
		align-items: center;
		color: #ADB0AE;
	}
	.bottom-numbers {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
		line-height: 20px;
		display: flex;
		align-items: center;
		color: #EA5404;
	}
</style>